<template>
    <div class="template-selection-page">
      <el-page-header @back="goBack" content="文章模板"></el-page-header>
  
      <div class="header">
        <h2>请选择一个模板</h2>
        <p>请随意选择，模板选择后可随时互换</p>
      </div>
  
      <el-tabs v-model="activeName" type="card" @tab-click="filterTemplates">
        <el-tab-pane
          v-for="category in categories"
          :key="category.name"
          :label="category.label"
          :name="category.name"
        >
          <div class="template-grid">
            <div
              v-for="item in filteredTemplates"
              :key="item.id"
              class="template-item"
            >
            <div>
              <el-image @click="chooseTemplate(item)" :src="item.templatePic"></el-image>
            </div>
              <p @click="chooseTemplate(item)">
                {{ item.templateName }}
              </p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane disabled>
          <span slot="label">
            <el-dropdown @command="filterByDropdown">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="option in moreOptions"
                  :key="option"
                  :command="option"
                  :class="{ selected: option === currentOption }"
                >
                  {{ option }}
                </el-dropdown-item>
                <div class="suggestion">
                  <a href="http://www.baidu.com"
                    >找不到你想要的分类？请告诉我们你的建议！</a
                  >
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </el-tab-pane>
      </el-tabs>
      <div class="loading" v-load:[loadText]="loading" />
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        activeName: "all",
        loading:false,
        loadText: "加载中···",
        websiteList: [
          {
            id: 0,
            templatePic:
              "https://cdn4.codesign.qq.com/prototypes/2024/03/13/1DWk924J7D1Q030GnMm13/biktvbfj0vgyvjlx/ef7d0ccb719e8f2e151ad81a49b23946.svg",
            templateUrl: "",
            templateName: "空白模板",
            templateType: "空白模板",
          },
          {
            id: 1,
            templatePic: "http://home.i3vsoft.com:1080/group1/中国民企/官网/daaba462c1e6c3c48df843e1f4c2b366.jpg",
            templateUrl: "http://home.i3vsoft.com:1080/group1/%E4%B8%AD%E5%9B%BD%E6%B0%91%E4%BC%81/%E5%AE%98%E7%BD%91/d5f093268daa5e086020b2f3e558704e.html?download=0",
            templateName: "日报",
            templateType: "新闻稿",
          },
          {
            id: 2,
            templatePic:"http://home.i3vsoft.com:1080/group1/中国民企/官网/fc2c0fa32cb6d352cf6cf106f2e3d894.png",
            templateUrl: "http://home.i3vsoft.com:1080/group1/中国民企/官网/969e671810cc0930353f3fa5517ddb3c.html?download=0",
            templateName: "Bentley市政行业",
            templateType: "Bentley市政行业",
          },
          {
            id: 3,
            templatePic: "http://home.i3vsoft.com:1080/group1/中国民企/官网/04e958670ed4e711c101674adfb86afe.jpg",
            templateUrl: "http://home.i3vsoft.com:1080/group1/中国民企/官网/7e830870aaea843b38704b4bd383f69c.html?download=0",
            templateName: "公司企业",
            templateType: "公司企业",
          },
        //   {
        //     id: 7,
        //     sitePic: "dist/template/Bentley市政/other/image.png",
        //     siteUrl: "dist/template/Bentley市政/other/index.html",
        //     siteType: "模板内页",
        //   },
        //   {
        //     id: 5,
        //     sitePic: "dist/template/maze/image.png",
        //     siteUrl: "dist/template/maze/index.html",
        //     siteType: "公司企业",
        //   },
        //   {
        //     id: 6,
        //     sitePic: "dist/template/maze/other/image.png",
        //     siteUrl: "dist/template/maze/other/index.html",
        //     siteType: "模板内页",
        //   },
        //   {
        //     id: 2,
        //     sitePic: "dist/template/Bentley市政行业/image.png",
        //     siteUrl: "dist/template/Bentley市政行业/index.html",
        //     siteType: "公司企业",
        //   },
        ],
        categories: [
          { name: "all", label: "全部" },
          { name: "精选", label: "精选" },
          { name: "新闻稿", label: "新闻稿" },
          { name: "空白模板", label: "空白模板" },
        //   { name: "公司/项目", label: "公司/项目" },
        //   { name: "公司企业", label: "公司企业" },
        //   { name: "初创公司", label: "初创公司" },
        //   { name: "工作室", label: "工作室" },
        //   { name: "个人作品集", label: "个人作品集" },
        //   { name: "商店", label: "商店" },
        ],
        moreOptions: [
          "博客",
          "情人节",
          "餐饮",
          "模板内页",
          "外贸",
          "酒店服务",
          "社区服务",
          "工业制造",
          "家政服务",
          "社会公益",
          "母婴保健",
          "健康与美容",
          "旅游出行",
          "家居与生活",
          "创意设计",
          "教育培训",
          "活动交流",
          "空白模板",
        ],
        currentOption: "",
        filteredTemplates: [],
      };
    },
    created() {
      this.filterTemplates({ name: this.activeName });
    },
    methods: {
      // 根据tab筛选模板
      filterTemplates(tab) {
        if (tab.name === "all") {
          this.filteredTemplates = this.websiteList;
        } else {
          this.filteredTemplates = this.websiteList.filter(
            (item) => item.templateType === tab.label
          );
        }
      },

      chooseTemplate(item){
        this.$confirm(`${this.$route.params.isEdit?'选择新模板将会清空文章内容，':''}是否选择[${item.templateName}]模板？`, "模板选择", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: 'btnTrues',
          type: "warning",
        }).then(() => {
          this.$router.push('/Main/articleManage/editor');
          setTimeout(async () => {
            // 获取在/public/template/index.html中的html代码
            await this.load(item.templateUrl);
          }, 300);
        }).catch(() => {})
      },

      // 加载html
      load(path) {
        if(path == ""){
          this.$store.commit("setHomepageHTML", '');
          this.$store.commit("triggerForceImport");
          return;
        }
        this.loading = true;
        axios.get(path, {
          headers: {
            accept: "text/html;charset=UTF-8",
          },
          params: {},
        })
        .then((res) => {
          this.$store.commit("setHomepageHTML", res.data);
          this.$store.commit("triggerForceImport");
          this.$nextTick(() => {
            this.loading = false;
          });
        }).catch((err) => {
          console.error(err);
          this.$nextTick(() => {
            this.loading = false;
          });
        });
      },

      // 根据下拉框筛选模板
      filterByDropdown(command) {
        // 下拉框选中值后，tab不选中值
        this.activeName = "all";
  
        // 当前选中的选项，用于修改选中item的样式
        this.currentOption = command;
  
        // 根据选中的选项筛选模板
        this.filteredTemplates = this.websiteList.filter(
          (item) => item.siteType === command
        );
      },
      goBack() {
        this.$router.go(-1);
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .template-selection-page {
    text-align: center;
    margin: 20px;
  }
  
  .header h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .header p {
    font-size: 14px;
    color: #888;
    margin: 15px 0;
  }
  
  .category-tabs {
    margin-bottom: 20px;
  }
  
  :deep(.el-tabs__header) {
    border: none;
    .el-tabs__nav-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30px;
      .el-tabs__nav-scroll {
        border: 1px solid #797979;
        border-radius: 9999px;
      }
    }
    .el-tabs__nav {
      border: none;
    }
    .el-tabs__item {
      border: none;
    }
    .el-tabs__item:hover {
      color: #6e5eff;
    }
    .el-tabs__item.is-active {
      color: #6e5eff;
    }
  }
  
  .el-dropdown-link {
    cursor: pointer;
    color: #303133;
  }
  .el-dropdown-link:hover {
    color: #6e5eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  
  .el-dropdown-menu {
    width: 670px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 5px;
    text-align: left;
    .el-dropdown-item {
      font-size: 16px;
      color: #303133;
      &:hover {
        background-color: #f5f5f5;
        color: #6e5eff;
      }
    }
    .el-dropdown-menu__item {
      line-height: 25px;
      .el-menu-item {
        padding: 0;
      }
    }
    .suggestion {
      display: block;
      text-align: left;
      margin: 10px 20px;
      font-size: 14px;
      grid-column: 1 / -1;
      a {
        text-decoration: none;
        color: #6e5eff;
      }
    }
  }
  
  .selected {
    color: #6e5eff;
  }
  
  .template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    justify-items: center;
    justify-content: space-around;
    gap: 20px 30px;
  }
  
  .template-item {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // cursor: pointer;
    p{
    margin-top: 10px;
    margin-bottom: 25px;
    font-size: large;
    &:hover{
      cursor: pointer;
      color: #b8b9ba;
    }
    &:active{
      color: #e0e1e3;
    }
  }
  .el-image{
    transition: 500ms;
    height: 180px;
    border: 1px solid #b8b9ba;
    border-radius: 10px;
    aspect-ratio: 10/6;
    &:hover{
      cursor: pointer;
      // margin-top: -20px;
      margin-bottom: -10px;
      height: 170px;
    }
  }
  }
  </style>
  